<template>
  <jke-modal
    :visible.sync="jkeForm.visible"
    :width="1200"
    :title="jkeForm.title"
    :fullscreen.sync="jkeForm.fullscreen"
    :switchFullscreen="jkeForm.switchFullscreen"
  >
    <!--  -->
    <crumbs @goBack="goBack" :superiorMenu="['仓库管理', '物品管理']" currentMenu="物品详情"> </crumbs>
    <div class="uni-card" style="padding-left: 130px">
      <!-- <div class="bd-line"></div> -->
      <div style="position: relative">
        <div style="position: absolute; left: -90px">
          <img v-if="fileList.length > 0" :src="[domianURL + fileList[0].uri]" alt="" class="imgClass" />
        </div>
        <div class="item-wrap" style="">
          <div class="detail-item">
            <p class="subtitle">物品编号</p>
            <p class="secondary-text">{{ detailInfo.goodsCode || '-' }}</p>
          </div>
          <div class="detail-item" style="padding-left: 0px">
            <p class="subtitle">物品名称|规格</p>
            <p class="secondary-text">{{ `${detailInfo.goodsName} | ${detailInfo.spec||'-'}` }}</p>
          </div>
          <div class="detail-item">
            <p class="subtitle"></p>
            <p class="secondary-text"></p>
          </div>
          <div class="detail-item" style="width: 10%; text-align: right">
            <flow-status ids="WMS_GOODS" :flowStatusText="detailInfo.flowStatusName" :flowStatus="detailInfo.flowStatus"></flow-status>
          </div>
        </div>
        <div class="item-wrap">
          <div class="detail-item">
            <p class="subtitle">类型</p>
            <p class="secondary-text">{{ detailInfo.typeText || '-' }}</p>
          </div>
          <div class="detail-item">
            <p class="subtitle">分类</p>
            <p class="secondary-text">{{ detailInfo.categoryText || '-' }}</p>
          </div>
          <div class="detail-item">
            <p class="subtitle">基本单位</p>
            <p class="secondary-text">{{ detailInfo.basicUnitText || '-' }}</p>
          </div>
          <div class="detail-item" style="width: 10%; text-align: right"></div>
        </div>
      </div>
    </div>
    <div class="cards-box">
      <a-card title="辅助单位" :bordered="false" style="margin-top: 12px">
        <a-table row-key="id" :columns="columns" :data-source="detailInfo.goodsAssistUnitList" :pagination="false" :scroll="{ x: '100%', y: 600 }">
        </a-table>
        <!-- <a-pagination
          :total="total"
          v-model="current"
          :page-size-options="pageSizeOptions"
          :page-size="pageSize"
          @change="onChangePage"
          @showSizeChange="onShowSizeChange"
          show-quick-jumper
          show-size-changer
          class="pagination"
        /> -->
      </a-card>
      <a-card title="采购" :bordered="false" style="margin: 12px 0">
        <div class="item-wrap" style="padding: 16px; margin-bottom: 12px">
          <div class="detail-item">
            <p class="subtitle">预留采购时长(天)</p>
            <p class="secondary-text">{{ detailInfo.estimatePurchaseTime || '-' }}</p>
          </div>
        </div>
        <!-- <a-table
          row-key="id"
          :columns="columns2"
          :data-source="detailInfo.supplierList"
          :pagination="false"
          :scroll="{ x: '100%', y: 600 }"
        >
        </a-table> -->
        <!-- <a-pagination
          :total="total"
          v-model="current"
          :page-size-options="pageSizeOptions"
          :page-size="pageSize"
          @change="onChangePage"
          @showSizeChange="onShowSizeChange"
          show-quick-jumper
          show-size-changer
          class="pagination"
        /> -->
      </a-card>
      <!-- <div> -->
      <Examine v-if="detailInfo.flowInstId" type="2" :id="detailInfo.flowInstId" ref="examine" />
      <!-- <div style="height:12px"></div> -->
      <!-- </div> -->
      <!-- <a-card title="其他信息" :bordered="false" style="margin-top: 12px">
        <div class="item-wrap">
          <div class="detail-item">
            <p class="subtitle">备注</p>
            <p class="secondary-text">{{ detailInfo.remark || '-' }}</p>
          </div>
        </div>
        <div class="item-wrap" style="margin-top:40px">
          <div style="width: 100%">
            <p class="subtitle">附件</p>
            <file-detail :ids="detailInfo.attachment"></file-detail>
          </div>
        </div>
      </a-card> -->
    </div>
  </jke-modal>
</template>
<script>
import crumbs from '@/components/crumbs.vue'
import { getFileListByIds } from '@/api/api'
import FileDetail from '@/components/fileActions/FileDetail'
import { goodsQueryById } from '@/api/goodsManagement'
import { mapState } from 'vuex'
import { apiBaseUrlDownload } from '@/utils/request'
import FlowStatus from '@/pubComponent/FlowStatus'
import Examine from '@/components/examine'
export default {
  data() {
    return {
      jkeForm: {
        title: '物品详情',
        visible: false,
        fullscreen: true,
        switchFullscreen: true,
      },
      domianURL: apiBaseUrlDownload,
      fileList: '',
      current: 1,
      total: 100,
      pageSize: 10,
      pageSizeOptions: ['10', '20', '30', '40', '50'],

      detailInfo: {
        teamGroupUserList: [
          {
            key: '1',
            name: 'John Brown',
            age: 32,
            address: 'New York No. 1 Lake Park',
            time: '2016-09-21 08:50:08',
          },
          {
            key: '2',
            name: 'Jim Green',
            age: 42,
            address: 'London No. 1 Lake Park',
            time: '2016-09-21 08:50:08',
          },
          {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sidney No. 1 Lake Park',
            time: '2016-09-21 08:50:08',
          },
          {
            key: '4',
            name: 'Jim Red',
            age: 32,
            address: 'London No. 2 Lake Park',
            time: '2016-09-21 08:50:08',
          },
        ],
      },
      columns2: [
        {
          title: '供应商编号',
          dataIndex: 'supplierCode',
          key: 'supplierCode',
          ellipsis: true,
        },
        {
          title: '供应商简称',
          dataIndex: 'fullName',
          key: 'fullName',
          ellipsis: true,
        },
      ],
    }
  },
  components: {
    crumbs,
    FileDetail,
    Examine,
    FlowStatus,
  },
  computed: {
    ...mapState({
      collapsed: (state) => state.user.collapsed,
    }),
    columns() {
      // let { typeFilter } = this
      // typeFilter = typeFilter || {}
      let { sortedInfo, filteredInfo } = this
      sortedInfo = sortedInfo || {}
      filteredInfo = filteredInfo || {}
      const columns = [
        // {
        //   title: '序号',
        //   dataIndex: 'index',
        //   key: 'index',
        //   customRender: (text, record, index) => `${index + 1}`,
        // },
        {
          title: '辅助单位',
          dataIndex: 'assistUnitText',
          key: 'assistUnitText',
          ellipsis: true,
        },
        {
          title: '一辅助单位等于多少基本单位',
          dataIndex: 'conversionRate',
          key: 'conversionRate',
          ellipsis: true,
        },
      ]
      return columns
    },
  },
  methods: {
    getFileList() {
      let ids = this.detailInfo.attachment
      getFileListByIds({ ids }).then((res) => {
        if (res.code == 200) {
          this.fileList = res.result
        }
      })
    },
    /* 面包屑返回 */
    goBack() {
      if (this.$route.query.from) {
        this.$router.push(this.$route.query.from)
        return
      }
      if (this.$route.query.backPath == 'myApply') {
        this.$router.go(-1)
        return
      }
      if (this.$route.query.backPath == 'workshopDemandListBack') {
        // this.$router.go(-1)
        this.$router.push('/workshopDemandList')

        return
      }
      if (this.$route.query.backPath == 'purchasingTasksList') {
        this.$router.push({
          path: '/procurementManagement/purchasingTasksList',
          query: { tab: this.$route.query.tab },
        })
        return
      }
      if (
        this.$route.query.backPath !== 'myApply' &&
        this.$route.query.backPath !== 'workshopDemandListBack' &&
        this.$route.query.backPath !== 'purchasingTasksList' &&
        this.$route.query.backPath !== undefined
      ) {
        this.$router.push(`/${this.$route.query.backPath}`)
        return
      }
      // if (this.$route.query.backPath == 'stockManagementList') {
      //   // this.$router.go(-1)
      //   this.$router.push('/stockManagementList')

      //   return
      // }
      // if (this.$route.query.backPath == 'InventoryAllReport') {
      //   this.$router.push('/InventoryAllReport')
      //   return
      // }
      // if (this.$route.query.backPath == 'realTimeInventory') {
      //   this.$router.push('/realTimeInventory')
      //   return
      // }
      this.$router.push('/warehouseManagement/goodsManagement/goodsManagementList')
    },
    initDetail(id) {
      this.jkeForm.visible = true
      goodsQueryById({ id }).then((res) => {
        if (res.code == 200) {
          this.detailInfo = res.result
          this.getFileList()
        }
      })
    },
    // 分页
    onChangePage(current, pageSize) {
      console.log(current, pageSize, '123123')
      this.getList(current)
      this.current = current
    },
    onShowSizeChange(current, pageSize) {
      this.getList(current, pageSize)
      this.pageSize = pageSize
      this.current = current
    },
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/public.less';
.item-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.item-wrap:nth-of-type(n + 3) {
  margin-top: 40px;
}
.detail-item {
  width: 30%;
}
.uni-card {
  padding: 24px 40px;
  margin: -12px -12px 0;
  background: #fff;
}
.bd-line {
  height: 1px;
  background: @greyBorder;
  margin: -12px -40px 24px -40px;
}
.cards-box {
  // height: calc(100vh - 70px);
  overflow-y: scroll;
}
.imgClass {
  width: 60px;
  height: 60px;
  border-radius: 6px;
}
</style>
